<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>06_flex</title>
	<base target="blank">
	<style>
		#konwledege{
			position: fixed;
			right: 2%;
			top:2%;
			text-decoration:underline;
			color:inherit;
			outline: none;
			color: orange;
			font-size: 12px;
		}
		#toTop{
			position: fixed;
			right: 2%;
			bottom: 2%;
			box-shadow: 1px 1px 1px rgba(0,0,0,.5);
			border-radius: 100%;
			width: 40px;
			height: 40px;
			line-height: 40px;
			font-size: 12px;
			text-align: center;
			color: red;
		}
		*{margin:0;padding: 0;}
		body{
			font-family: 'Microsoft yahei', Verdana, '仿宋',Arial, Helvetica, sans-serif;
			font-size: 18px;
			max-width: 1000px;
			margin: auto;
			position: relative;
		}
		a{text-decoration:none;color:inherit;outline: none;}
		img{border:none;vertical-align: middle;outline:none;}
		li{list-style:none;}
		
		section{
			position: relative;
			margin:50px auto;
		}
		section>h2{
			margin-bottom: 25px;
			text-align: center;
		}
		/*------------------------------jd-----------------------------------*/
		.jd > ul{
			user-select:none;
			-moz-user-select:none;
			-ms-user-select:none;

			display: flex;
			margin: auto;
			width: 600px;
			height: 800px;
			flex-flow:row wrap;
			justify-content:space-between;
			align-content:space-between;
			border:1px solid blue;
		}
		.jd > ul >li{
			box-sizing: border-box;
			width: 24%;
			height: 24%;
			text-align: center;
			display: flex;
			flex-flow:column;
			justify-content: space-around;
			align-items:center;
		}
		.jd > ul >li > img{
			width: 120px;
			height: 120px;
		}
		.jd > ul >li  > a{
			width: 100%;
			font-size: 16px;
			overflow:hidden;
			text-overflow:ellipsis;
			white-space:nowrap;
		}
		.jd > ul >li  > span{
			width: 100%;
			overflow:hidden;
			text-overflow:ellipsis;
			white-space:nowrap;
			font-size: 14px;
			color:#ccc;
		}
		/*------------------------------瀑布流-----------------------------------*/
		.pbl>.wrap{		
			margin: auto;
			width: 800px;
			height: auto;
			border:1px solid #000;

			-webkit-column-count:4;
			-webkit-column-gap:20px;
			-webkit-column-rule:1px dashed blue;

			-moz-column-count:4;
			-moz-column-gap:20px;
			-moz-column-rule:1px dashed blue;
		}
		.pbl>.wrap>img{
			box-sizing: border-box;
			max-width: 180px;
		}
		/*------------------------------倒影-----------------------------------*/
		.reflect{
			padding-bottom: 0px;
			text-align: center;
		}
		.reflect>img{
			width: 400px;
			-webkit-box-reflect: below 0px -webkit-linear-gradient(90deg,rgb(255, 255, 255),rgba(0,0,0,0));
		}
		.reflect>.pic{
			margin-top:400px;
			text-align: left;
		}
		.reflect>.pic>img{
			width: 400px;
			-webkit-box-reflect:right 0px ;
			-webkit-mask-image: url(img/huawei.png);
		    -webkit-mask-position: 10px -173px;
		    -webkit-mask-size: 520px 462px;
		}
	</style>
</head>
<body>
	<div id="konwledege"><a href="baseKnowledege.html" target="_self">基本知识</a></div>
	<a href="#" id='toTop'>Top</a>
	<section class="jd">
		<h2>京东弹性盒子布局</h2>
		<ul>
			<li>
				<img src="img/01.png" alt="">
				<a href='javascript:'>京东客户端</a>
				<span>用京东，简单你的生活</span>
			</li>
			<li>
				<img src="img/02.png" alt="">
				<a href='javascript:'>京东客户端</a>
				<span>用京东，简单你的生活</span>
			</li>
			<li>
				<img src="img/03.png" alt="">
				<a href='javascript:'>京东客户端</a>
				<span>用京东，简单你的生活</span>
			</li>
			<li>
				<img src="img/04.png" alt="">
				<a href='javascript:'>京东客户端京东客户端京东客户端京东客户端</a>
				<span>用京东，简单你的生活用京东，简单你的生活用京东，简单你的生活用京东，简单你的生活</span>
			</li>
			<li>
				<img src="img/05.png" alt="">
				<a href='javascript:'>京东客户端</a>
				<span>用京东，简单你的生活</span>
			</li>
			<li>
				<img src="img/06.png" alt="">
				<a href='javascript:'>京东客户端</a>
				<span>用京东，简单你的生活</span>
			</li>
			<li>
				<img src="img/07.png" alt="">
				<a href='javascript:'>京东客户端</a>
				<span>用京东，简单你的生活</span>
			</li>
			<li>
				<img src="img/08.png" alt="">
				<a href='javascript:'>京东客户端</a>
				<span>用京东，简单你的生活</span>
			</li>
			<li>
				<img src="img/09.png" alt="">
				<a href='javascript:'>京东客户端</a>
				<span>用京东，简单你的生活</span>
			</li>
			<li>
				<img src="img/10.png" alt="">
				<a href='javascript:'>京东客户端</a>
				<span>用京东，简单你的生活</span>
			</li>
			<li>
				<img src="img/11.png" alt="">
				<a href='javascript:'>京东客户端</a>
				<span>用京东，简单你的生活</span>
			</li>
			<li>
				<img src="img/12.png" alt="">
				<a href='javascript:'>京东客户端</a>
				<span>用京东，简单你的生活</span>
			</li>
			<li>
				<img src="img/13.png" alt="">
				<a href='javascript:'>京东客户端</a>
				<span>用京东，简单你的生活</span>
			</li>
		</ul>
	</section>
	<section class="pbl">
		<h2>瀑布流</h2>
		<div class="wrap">
			<img src="img-pbl/1.jpg" alt="">
			<img src="img-pbl/2.jpg" alt="">
			<img src="img-pbl/3.jpg" alt="">
			<img src="img-pbl/4.jpg" alt="">
			<img src="img-pbl/5.jpg" alt="">
			<img src="img-pbl/6.jpg" alt="">
			<img src="img-pbl/7.jpg" alt="">
			<img src="img-pbl/8.jpg" alt="">
			<img src="img-pbl/9.jpg" alt="">
			<img src="img-pbl/10.jpg" alt="">
			<img src="img-pbl/11.jpg" alt="">
			<img src="img-pbl/12.jpg" alt="">
			<img src="img-pbl/13.jpg" alt="">
			<img src="img-pbl/14.jpg" alt="">
			<img src="img-pbl/15.jpg" alt="">
			<img src="img-pbl/16.jpg" alt="">
			<img src="img-pbl/17.jpg" alt="">
			<img src="img-pbl/18.jpg" alt="">
			<img src="img-pbl/19.jpg" alt="">
			<img src="img-pbl/20.jpg" alt="">
			<img src="img-pbl/21.jpg" alt="">
			<img src="img-pbl/22.jpg" alt="">
			<img src="img-pbl/23.jpg" alt="">
			<img src="img-pbl/24.jpg" alt="">
			<img src="img-pbl/25.jpg" alt="">
			<img src="img-pbl/26.jpg" alt="">
			<img src="img-pbl/27.jpg" alt="">
			<img src="img-pbl/28.jpg" alt="">
			<img src="img-pbl/29.jpg" alt="">
			<img src="img-pbl/30.jpg" alt="">
			<img src="img-pbl/31.jpg" alt="">
			<img src="img-pbl/32.jpg" alt="">
			<img src="img-pbl/33.jpg" alt="">
			<img src="img-pbl/34.jpg" alt="">
			<img src="img-pbl/35.jpg" alt="">
			<img src="img-pbl/36.jpg" alt="">
			<img src="img-pbl/37.jpg" alt="">
			<img src="img-pbl/38.jpg" alt="">
			<img src="img-pbl/39.jpg" alt="">
			<img src="img-pbl/40.jpg" alt="">
			<img src="img-pbl/41.jpg" alt="">
			<img src="img-pbl/42.jpg" alt="">
			<img src="img-pbl/43.jpg" alt="">
			<img src="img-pbl/44.jpg" alt="">
			<img src="img-pbl/45.jpg" alt="">
			<img src="img-pbl/46.jpg" alt="">
		</div>
	</section>
	<section class="reflect">
		<h2>box-reflect</h2>
		<img src="http://tupian.enterdesk.com/2015/xu/08/20/2/1.jpg.500.300.jpg" alt="">
		<div class="pic">
			<img src="http://img.pconline.com.cn/images/upload/upc/tx/wallpaper/1205/25/c2/11755122_1337938898580_800x600.jpg" alt="">
		</div>
	</section>
	<script>
		
	</script>
</body>
</html>